<template>
	<view class="anmed">
		<view class="my-top">
			<image class="header" src="https://xcx.xiaombt.com/img/img/header.png" mode="" :style="{ height: navbarHeight + 'px' }">
			</image>
			<view class="nav">
				<u-navbar :title="data.title" :autoBack='true' bgColor="transparent" leftIconColor='#6C5D47'
					titleStyle='color:#6C5D47' placeholder>
				</u-navbar>
			</view>
		</view>
		<view class="main" :style="{ marginTop: viewHeight + 'px' }">
			<!-- <image class="main-top" src="https://xcx.xiaombt.com/img/img/底图-2.png" mode=""></image> -->
			<view class="main-top1">
				<image class="img" :src='data.thumb?ENV.BASE_API+data.thumb:"https://xcx.xiaombt.com/img/img/底图-2.png"' mode=""></image>
				<view class="imgList">
					<u-album :urls="urls2"></u-album>
				</view>
				<u-upload @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1"
					:previewImage='false'>
					<view class="add">
						添加图片
					</view>
				</u-upload>
			</view>
			<view class="main-item">
				<view class="title">
					<image src="https://xcx.xiaombt.com/img/img/line.png" mode=""></image>
					<text>纲、目、科</text>
				</view>
				<view class="con">
					{{data.gang || ''}}、{{data.mu|| ''}}、{{data.ke|| ''}}
				</view>
			</view>
			<view class="main-item">
				<view class="title">
					<image src="https://xcx.xiaombt.com/img/img/line.png" mode=""></image>
					<text>形态描述</text>
				</view>
				<view class="con">
					{{data.xingtai|| ''}}
				</view>
			</view>
			<view class="main-item">
				<view class="title">
					<image src="https://xcx.xiaombt.com/img/img/line.png" mode=""></image>
					<text>生态资料</text>
				</view>
				<view class="con">
					{{data.shengtai|| ''}}
				</view>
			</view>
			<view class="main-item">
				<view class="title">
					<image src="https://xcx.xiaombt.com/img/img/line.png" mode=""></image>
					<text>地理分布</text>
				</view>
				<view class="con">
					{{data.dili|| ''}}
				</view>
			</view>
			<view class="main-item">
				<view class="title">
					<image src="https://xcx.xiaombt.com/img/img/line.png" mode=""></image>
					<text>养殖情况</text>
				</view>
				<view class="con">
					{{data.yangzhi|| ''}}
				</view>
			</view>
			<view class="main-item">
				<view class="title">
					<image src="https://xcx.xiaombt.com/img/img/line.png" mode=""></image>
					<text>产地初加工</text>
				</view>
				<view class="con">
					{{data.chandi|| ''}}
				</view>
			</view>
			<view class="main-item">
				<view class="title">
					<image src="https://xcx.xiaombt.com/img/img/line.png" mode=""></image>
					<text>建  议</text>
				</view>
				<view class="con-text">
					<u--textarea v-model="value1" placeholder="请输入内容"></u--textarea>
				</view>
			</view>
			<view class="main-button">
				提 交
			</view>
		</view>

	</view>
</template>

<script>
	import {
		anmedDetail,
		uploads,
		medanForm
	} from '@/api/index.js'
	import {
		ENV
	} from '.env.js'
	export default {
		data() {
			return {
				viewHeight: null,
				navbarHeight: null,
				value1: '',
				id:'',
				type:'',
				fileList6: [],
				urls2: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',

				],
				data:{},
				ENV: null
			};
		},
		mounted() {
			this.ENV = ENV

		},
		async onLoad(option) {
			this.id = option.id
			this.type = option.type
			
			const query = uni.createSelectorQuery().in(this);
			query.select('.nav').boundingClientRect(data => {
				if (data) {
					this.navbarHeight = data.height;
				}
			}).exec();
			query.select('.my-top').boundingClientRect(data => {
				if (data) {
					this.viewHeight = data.height;
				}
			}).exec();
			





		},
		mounted() {
			if(this.type === 'mean'){
				this.getmedanForm()
			}else{
				this.getmedanForm()
			}
		},
		methods: {
			getmedanForm(){
				medanForm({
				id: this.id
			}).then(res => {
				this.data = res.rst
			})
			},
			getanmedDetail(){
				anmedDetail({
					id: this.id
				}).then(res => {
				this.data = res.rst
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				console.log(url)
				const that = this
				uni.showLoading({
					mask: true
				})
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: ENV.BASE_API + 'api.php?m=index.uploads',
						filePath: url,
						header: {
							'Content-Type': 'multipart/form-data',
						},
						name: 'file_upload',
						success: (res) => {
							uni.hideLoading();
							uni.showModal({
								content: '上传成功感谢提供！',
								showCancel: false
							});
						},
						fail: (err) => {
							uni.hideLoading();
							uni.showModal({
								content: err.errMsg,
								showCancel: false
							});
						},
					});
				})
			},
		}
	};
</script>


<style lang="scss" scoped>
	/deep/.u-textarea {
		background: none !important;
		border: none !important;

	}

	/deep/.u-album__row__wrapper {
		margin-right: 14rpx !important;

		image {
			width: 212rpx !important;
			height: 206rpx !important;
		}
	}

	.main {
		padding-bottom: 50rpx;

		.main-top {
			width: 100%;
			display: block;
			height: 338rpx;
		}

		.main-top1 {
			width: 100%;
			position: relative;

			.img {
				width: 100%;
				display: block;
				height: 338rpx;
			}

			.imgList {
				width: 676rpx;
				margin: 18rpx auto;

			}

			.add {
				position: absolute;
				right: 36rpx;
				top: 26rpx;
				/* 矩形 40 */

				width: 128rpx;
				height: 48rpx;
				border-radius: 24rpx;
				text-align: center;
				color: #fff;
				font-size: 24rpx;
				line-height: 48rpx;
				background: rgb(1, 83, 237);
			}
		}

		.main-button {
			width: 676rpx;
			height: 96rpx;
			background-image: url('https://xcx.xiaombt.com/img/img/tijiao.png');
			background-size: 100% 100%;
			text-align: center;
			line-height: 96rpx;
			color: #fff;
			margin: 48rpx auto;
			font-size: 32rpx;
			font-weight: 550;
		}

		.main-item {
			width: 676rpx;
			margin: auto;

			.title {
				display: flex;
				align-items: center;
				margin: 32rpx 0;

				image {
					width: 8rpx;
					height: 41rpx;
					display: inline-block;
					margin-right: 20rpx;
				}

				text {
					color: rgb(108, 93, 71);
					font-family: 思源黑体;
					font-size: 32rpx;
					font-weight: 500;

				}
			}

			.con {
				line-height: 48rpx;
				color: rgb(51, 51, 51);
				font-family: 思源黑体;
				font-size: 28rpx;
				font-weight: 300;
				text-indent: 2em;
			}

			.con-text {
				width: 100%;
				background-image: url('https://xcx.xiaombt.com/img/img/detail.png');
				background-size: 100% 100%;

			}
		}
	}








	.my-top {
		width: 100%;
		background-color: #F2EFE9;
		position: fixed;
		z-index: 10000;
		top: 0;
		left: 0;

		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.select {
			padding: 20rpx 38rpx;
			background-color: #fff;

			.center {
				width: 100%;
				height: 76rpx;
				position: relative;
				display: flex;
				align-items: center;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

	}
</style>